<html>
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>渲染与校验 | 🦌</title>
<link rel="shortcut icon" href="https://croatiaparanoia.github.io/blog//favicon.ico?v=1614759965596">
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://croatiaparanoia.github.io/blog//styles/main.css">
<link rel="alternate" type="application/atom+xml" title="渲染与校验 | 🦌 - Atom Feed" href="https://croatiaparanoia.github.io/blog//atom.xml">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700">



    <meta name="description" content="当时写这个页面， 对我收获最大的应该是一个FormItem组件的Props设计，以及提交时的每一个FormItem的值校验逻辑。
​UI:

输入&amp;选择的Form列表的数据源

使用数据源：

存储用户录入数据的容器：

校验函数：..." />
    <meta name="keywords" content="React" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
  </head>
  <body>
    <div class="main">
      <div class="main-content">
        <div class="site-header">
  <a href="https://croatiaparanoia.github.io/blog/">
  <img class="avatar" src="https://croatiaparanoia.github.io/blog//images/avatar.png?v=1614759965596" alt="">
  </a>
  <h1 class="site-title">
    🦌
  </h1>
  <p class="site-description">
    万物皆有裂痕，那是光照进来的地方。
  </p>
  <div class="menu-container">
    
      
        <a href="/blog/" class="menu">
          首页
        </a>
      
    
      
        <a href="/blog/archives" class="menu">
          归档
        </a>
      
    
      
        <a href="/blog/tags" class="menu">
          标签
        </a>
      
    
      
        <a href="/blog/post/about" class="menu">
          关于
        </a>
      
    
  </div>
  <div class="social-container">
    
      
        <a href="https://github.com/CroatiaParanoia" target="_blank">
          <i class="ri-github-line"></i>
        </a>
      
    
      
    
      
    
      
    
      
    
  </div>
</div>

        <div class="post-detail">
          <article class="post">
            <h2 class="post-title">
              渲染与校验
            </h2>
            <div class="post-info">
              <span>
                2019-04-28
              </span>
              <span>
                1 min read
              </span>
              
                <a href="https://croatiaparanoia.github.io/blog/tag/vc3DCvf3O/" class="post-tag">
                  # React
                </a>
              
            </div>
            
              <img class="post-feature-image" src="https://croatiaparanoia.github.io/blog//post-images/xuan-ran-yu-xiao-yan.jpeg" alt="">
            
            <div class="post-content-wrapper">
              <div class="post-content">
                <p>当时写这个页面， 对我收获最大的应该是一个FormItem组件的Props设计，以及提交时的每一个FormItem的值校验逻辑。</p>
<p>​UI:</p>
<figure data-type="image" tabindex="1"><img src="https://croatiaparanoia.github.io/blog//post-images/1609755396474.png" alt="" loading="lazy"></figure>
<p>输入&amp;选择的Form列表的数据源</p>
<figure data-type="image" tabindex="2"><img src="https://croatiaparanoia.github.io/blog//post-images/1609755402190.png" alt="" loading="lazy"></figure>
<p>使用数据源：</p>
<figure data-type="image" tabindex="3"><img src="https://croatiaparanoia.github.io/blog//post-images/1609755409906.png" alt="" loading="lazy"></figure>
<p>存储用户录入数据的容器：</p>
<figure data-type="image" tabindex="4"><img src="https://croatiaparanoia.github.io/blog//post-images/1609755415123.png" alt="" loading="lazy"></figure>
<p>校验函数：</p>
<figure data-type="image" tabindex="5"><img src="https://croatiaparanoia.github.io/blog//post-images/1609755425140.png" alt="" loading="lazy"></figure>
<p>使用校验函数：</p>
<figure data-type="image" tabindex="6"><img src="https://croatiaparanoia.github.io/blog//post-images/1609755431372.png" alt="" loading="lazy"></figure>
<p>此方式，</p>
<p>一个重点是数据驱动视图， FormItem 的样子， 由props的数据控制。</p>
<p>第二个则是 rules这个校验规则。</p>
<p>如果在以前要判断这些数据是否合法， 需要一个个的写if来判断， 判断得多的话， 基本都是一整页都是if代码</p>
<p>而如果使用rules + 校验函数， 则值需要几行代码， 循环计算然后，抛出有误的提示语句，并大大简洁了代码。</p>
<p>此方式借鉴了 Ant Design 的 <a href="%5Bhttps://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99%5D(https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99)">规则校验 | 表单 Form  - Ant Design</a></p>
<p>以及看到别人推荐的一个校验器 <a href="https://github.com/fjc0k/vtils#easyvalidator">fjc0k/vtils: 小巧实用的 JavaScript 工具类库</a></p>

              </div>
              <div class="toc-container">
                
              </div>
            </div>
          </article>
        </div>

        

        
          
            <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>

<script>

  var gitalk = new Gitalk({
    clientID: '344de4a7a0e3121bcdbc',
    clientSecret: 'cf3ede59043d5bf3f50b37b93791396bb4d1267e',
    repo: 'blog',
    owner: 'CroatiaParanoia',
    admin: ['CroatiaParanoia'],
    id: (location.pathname).substring(0, 49),      // Ensure uniqueness and length less than 50
    distractionFreeMode: false  // Facebook-like distraction free mode
  })

  gitalk.render('gitalk-container')

</script>

          

          
        

        <div class="site-footer">
  Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a>
  <a class="rss" href="https://croatiaparanoia.github.io/blog//atom.xml" target="_blank">
    <i class="ri-rss-line"></i> RSS
  </a>
</div>

      </div>
    </div>

    <script>
      hljs.initHighlightingOnLoad()

      let mainNavLinks = document.querySelectorAll(".markdownIt-TOC a");

      // This should probably be throttled.
      // Especially because it triggers during smooth scrolling.
      // https://lodash.com/docs/4.17.10#throttle
      // You could do like...
      // window.addEventListener("scroll", () => {
      //    _.throttle(doThatStuff, 100);
      // });
      // Only not doing it here to keep this Pen dependency-free.

      window.addEventListener("scroll", event => {
        let fromTop = window.scrollY;

        mainNavLinks.forEach((link, index) => {
          let section = document.getElementById(decodeURI(link.hash).substring(1));
          let nextSection = null
          if (mainNavLinks[index + 1]) {
            nextSection = document.getElementById(decodeURI(mainNavLinks[index + 1].hash).substring(1));
          }
          if (section.offsetTop <= fromTop) {
            if (nextSection) {
              if (nextSection.offsetTop > fromTop) {
                link.classList.add("current");
              } else {
                link.classList.remove("current");    
              }
            } else {
              link.classList.add("current");
            }
          } else {
            link.classList.remove("current");
          }
        });
      });

    </script>
  </body>
</html>
